<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统数据监控平台</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
            background: #273A4A;
            color: #ffffff;
            overflow-x: hidden;
            padding-top: 0;
        }

        /* 顶部导航栏 */
        .header {
            background: linear-gradient(135deg, #456A9E, #5B7BB8);
            padding: 0 24px;
            height: 64px;
            display: flex;
            align-items: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
        }

        .logo {
            font-size: 20px;
            font-weight: bold;
            color: white;
            margin-right: 40px;
        }

        .nav-menu {
            display: flex;
            align-items: center;
            gap: 32px;
            flex: 1;
        }

        .nav-item {
            color: rgba(255,255,255,0.8);
            text-decoration: none;
            padding: 8px 16px;
            border-radius: 6px;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .nav-item:hover, .nav-item.active {
            background: rgba(255,255,255,0.1);
            color: white;
        }

        .user-info {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .user-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #fff;
            color: #456A9E;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

        /* 侧边栏 */
        .sidebar {
            width: 240px;
            background: #1F2A37;
            height: calc(100vh - 64px);
            position: fixed;
            left: 0;
            top: 64px;
            z-index: 999;
            border-right: 1px solid #374151;
        }

        .sidebar-menu {
            padding: 20px 0;
        }

        .menu-item {
            display: flex;
            align-items: center;
            padding: 12px 24px;
            color: rgba(255,255,255,0.7);
            text-decoration: none;
            transition: all 0.3s ease;
            border-left: 3px solid transparent;
        }

        .menu-item:hover {
            background: rgba(69, 106, 158, 0.1);
            color: white;
            border-left-color: #456A9E;
        }

        .menu-item.active {
            background: rgba(69, 106, 158, 0.2);
            color: white;
            border-left-color: #456A9E;
        }

        .menu-icon {
            width: 20px;
            height: 20px;
            margin-right: 12px;
            opacity: 0.7;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 主内容区 */
        .main-content {
            margin-left: 240px;
            margin-top: 64px;
            padding: 24px;
            min-height: calc(100vh - 64px);
        }

        /* 仪表板概览卡片 */
        .dashboard-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 24px;
            margin-bottom: 32px;
        }

        .card {
            background: #1F2A37;
            border-radius: 12px;
            padding: 24px;
            border: 1px solid #374151;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }

        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0,0,0,0.2);
        }

        .card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .card-title {
            font-size: 16px;
            color: rgba(255,255,255,0.9);
            font-weight: 500;
        }

        .card-value {
            font-size: 32px;
            font-weight: bold;
            color: #456A9E;
            margin-bottom: 8px;
        }

        .card-subtitle {
            font-size: 14px;
            color: rgba(255,255,255,0.6);
        }

        /* 图表容器 */
        .chart-container {
            background: #1F2A37;
            border-radius: 12px;
            padding: 24px;
            border: 1px solid #374151;
            margin-bottom: 24px;
        }

        .chart-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 24px;
        }

        .chart-title {
            font-size: 18px;
            font-weight: 600;
            color: white;
        }

        .chart-wrapper {
            position: relative;
            height: 400px;
        }

        /* 表格样式 */
        .table-container {
            background: #1F2A37;
            border-radius: 12px;
            border: 1px solid #374151;
            overflow: hidden;
        }

        .table-header {
            padding: 20px 24px;
            border-bottom: 1px solid #374151;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .table-title {
            font-size: 18px;
            font-weight: 600;
            color: white;
        }

        .btn {
            padding: 8px 16px;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .btn-primary {
            background: #456A9E;
            color: white;
        }

        .btn-primary:hover {
            background: #5B7BB8;
            transform: translateY(-1px);
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
        }

        .data-table th,
        .data-table td {
            padding: 16px 24px;
            text-align: left;
            border-bottom: 1px solid #374151;
        }

        .data-table th {
            background: rgba(69, 106, 158, 0.1);
            color: rgba(255,255,255,0.9);
            font-weight: 600;
            font-size: 14px;
        }

        .data-table td {
            color: rgba(255,255,255,0.8);
            font-size: 14px;
        }

        .data-table tr:hover {
            background: rgba(69, 106, 158, 0.05);
        }

        .status-badge {
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
        }

        .status-active {
            background: rgba(34, 197, 94, 0.2);
            color: #4ade80;
        }

        .status-pending {
            background: rgba(249, 115, 22, 0.2);
            color: #fb923c;
        }

        .status-paused {
            background: rgba(156, 163, 175, 0.2);
            color: #9ca3af;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .sidebar {
                transform: translateX(-100%);
                transition: transform 0.3s ease;
            }

            .main-content {
                margin-left: 0;
                margin-top: 64px;
                padding: 16px;
                min-height: calc(100vh - 64px);
            }

            .dashboard-cards {
                grid-template-columns: 1fr;
                gap: 16px;
            }
            
            .header {
                padding: 0 16px;
            }
            
            .nav-menu {
                display: none;
            }
            
            .detail-layout,
            .account-detail-layout {
                grid-template-columns: 1fr;
                gap: 16px;
            }
            
            .chart-wrapper {
                height: 250px !important;
            }
            
            .table-container {
                overflow-x: auto;
            }
            
            .data-table {
                min-width: 600px;
            }
        }

        @media (max-width: 1024px) {
            .dashboard-cards {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .detail-layout,
            .account-detail-layout {
                grid-template-columns: 1fr;
            }
            
            .chart-container div[style*="grid-template-columns"] {
                grid-template-columns: 1fr !important;
            }
        }

        @media (max-width: 480px) {
            .card-value {
                font-size: 24px;
            }
            
            .card-title {
                font-size: 14px;
            }
            
            .card-subtitle {
                font-size: 12px;
            }
            
            .btn {
                padding: 6px 12px;
                font-size: 12px;
            }
            
            .main-content {
                margin-top: 64px;
                padding: 12px;
            }
        }

        /* 动画效果 */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .card, .chart-container, .table-container {
            animation: fadeInUp 0.6s ease-out;
        }

        /* 隐藏内容的样式 */
        .content-section {
            display: none;
        }

        .content-section.active {
            display: block;
        }

        /* 扁平化图标样式 */
        .icon {
            width: 20px;
            height: 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .icon::before {
            content: '';
            position: absolute;
            background: currentColor;
            border-radius: 2px;
        }

        /* 仪表板图标 */
        .icon-dashboard::before {
            width: 12px;
            height: 12px;
            background: linear-gradient(45deg, currentColor 40%, transparent 40%, transparent 60%, currentColor 60%);
        }

        /* 用户图标 */
        .icon-users::before {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 2px solid currentColor;
            background: transparent;
        }

        .icon-users::after {
            content: '';
            position: absolute;
            width: 14px;
            height: 8px;
            border-radius: 8px 8px 0 0;
            border: 2px solid currentColor;
            border-bottom: none;
            top: 10px;
            background: transparent;
        }

        /* 目标图标 */
        .icon-target::before {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 2px solid currentColor;
            background: transparent;
        }

        .icon-target::after {
            content: '';
            position: absolute;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: currentColor;
        }

        /* 图表图标 */
        .icon-chart {
            position: relative;
        }

        .icon-chart::before {
            content: '';
            position: absolute;
            width: 3px;
            height: 12px;
            background: currentColor;
            left: 2px;
            border-radius: 1px;
        }

        .icon-chart::after {
            content: '';
            position: absolute;
            width: 3px;
            height: 8px;
            background: currentColor;
            left: 7px;
            border-radius: 1px;
        }

        .icon-chart:hover::before {
            height: 15px;
        }

        /* 为图表图标添加第三个柱子 */
        .icon-chart {
            background: linear-gradient(to right, 
                transparent 12px,
                currentColor 12px,
                currentColor 15px,
                transparent 15px
            );
        }

        /* 设置图标 */
        .icon-settings::before {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 2px solid currentColor;
            background: transparent;
        }

        .icon-settings::after {
            content: '';
            position: absolute;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: currentColor;
        }

        /* Logo图标 */
        .logo-icon {
            width: 24px;
            height: 24px;
            background: linear-gradient(45deg, #4FC3F7, #29B6F6);
            border-radius: 6px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-right: 8px;
            position: relative;
        }

        .logo-icon::before {
            content: '';
            width: 8px;
            height: 8px;
            background: white;
            border-radius: 1px;
        }

        /* 分页样式 */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px 24px;
            background: #1F2A37;
            border-top: 1px solid #374151;
            gap: 8px;
        }

        .pagination-item {
            padding: 8px 12px;
            border-radius: 6px;
            border: 1px solid #374151;
            background: transparent;
            color: rgba(255,255,255,0.7);
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
            min-width: 40px;
            text-align: center;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .pagination-item:hover {
            background: rgba(69, 106, 158, 0.2);
            color: white;
            border-color: #456A9E;
        }

        .pagination-item.active {
            background: #456A9E;
            color: white;
            border-color: #456A9E;
        }

        .pagination-item.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .pagination-item.disabled:hover {
            background: transparent;
            color: rgba(255,255,255,0.7);
            border-color: #374151;
        }

        .pagination-info {
            color: rgba(255,255,255,0.6);
            font-size: 14px;
            margin: 0 16px;
        }

        /* 平台图标样式 */
        .platform-icon {
            width: 20px;
            height: 20px;
            border-radius: 4px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-right: 8px;
            font-size: 12px;
            font-weight: bold;
            color: white;
        }

        .platform-weibo { background: #E6162D; }
        .platform-wechat { background: #07C160; }
        .platform-douyin { background: #FF0050; }
        .platform-xiaohongshu { background: #FF2442; }
        .platform-facebook { background: #1877F2; }
        .platform-twitter { background: #1DA1F2; }
        .platform-instagram { background: #E4405F; }
        .platform-linkedin { background: #0A66C2; }
        .platform-youtube { background: #FF0000; }
        .platform-tiktok { background: #000000; }

        /* 投放计划详情页面样式 */
        .campaign-detail {
            display: none;
        }

        .campaign-detail.active {
            display: block;
        }

        .detail-layout {
            display: grid;
            grid-template-columns: 300px 1fr;
            gap: 24px;
            height: calc(100vh - 200px);
        }

        .detail-sidebar {
            background: #1F2A37;
            border-radius: 12px;
            padding: 24px;
            border: 1px solid #374151;
        }

        .detail-main {
            background: #1F2A37;
            border-radius: 12px;
            border: 1px solid #374151;
            overflow: hidden;
        }

        .detail-title {
            font-size: 18px;
            font-weight: 600;
            color: white;
            margin-bottom: 20px;
        }

        .detail-item {
            margin-bottom: 16px;
        }

        .detail-label {
            font-size: 14px;
            color: rgba(255,255,255,0.6);
            margin-bottom: 4px;
        }

        .detail-value {
            font-size: 14px;
            color: rgba(255,255,255,0.9);
            font-weight: 500;
        }

        .project-header {
            padding: 20px 24px;
            border-bottom: 1px solid #374151;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .project-title {
            font-size: 18px;
            font-weight: 600;
            color: white;
        }

        .project-actions {
            display: flex;
            gap: 12px;
        }

        .project-table-container {
            height: calc(100% - 80px);
            overflow-y: auto;
        }

        .breadcrumb-nav {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 20px;
            font-size: 14px;
            color: rgba(255,255,255,0.6);
        }

        .breadcrumb-nav a {
            color: #456A9E;
            text-decoration: none;
            cursor: pointer;
        }

        .breadcrumb-nav a:hover {
            color: #5B7BB8;
        }

        .breadcrumb-nav .current {
            color: rgba(255,255,255,0.9);
        }

        /* 可点击的计划名称 */
        .clickable-campaign {
            color: #456A9E;
            cursor: pointer;
            text-decoration: none;
        }

        .clickable-campaign:hover {
            color: #5B7BB8;
            text-decoration: underline;
        }

        /* 账号详情页面样式 */
        .account-detail {
            display: none;
        }

        .account-detail.active {
            display: block;
        }

        .account-detail-layout {
            display: grid;
            grid-template-columns: 300px 1fr;
            gap: 24px;
            height: calc(100vh - 200px);
        }

        .account-info-sidebar {
            background: #1F2A37;
            border-radius: 12px;
            padding: 24px;
            border: 1px solid #374151;
        }

        .account-main-content {
            display: grid;
            grid-template-rows: auto 1fr;
            gap: 24px;
        }

        .cookie-section {
            background: #1F2A37;
            border-radius: 12px;
            padding: 24px;
            border: 1px solid #374151;
        }

        .cookie-title {
            font-size: 18px;
            font-weight: 600;
            color: white;
            margin-bottom: 16px;
        }

        .cookie-item {
            padding: 8px 0;
            border-bottom: 1px solid #374151;
            color: rgba(255,255,255,0.8);
            font-size: 14px;
        }

        .cookie-item:last-child {
            border-bottom: none;
        }

        .records-section {
            background: #1F2A37;
            border-radius: 12px;
            border: 1px solid #374151;
            overflow: hidden;
        }

        .records-header {
            padding: 20px 24px;
            border-bottom: 1px solid #374151;
        }

        .records-title {
            font-size: 18px;
            font-weight: 600;
            color: white;
            margin-bottom: 16px;
        }

        .records-table-container {
            height: 300px;
            overflow-y: auto;
        }

        /* 可点击的用户名 */
        .clickable-user {
            color: #456A9E;
            cursor: pointer;
            text-decoration: none;
        }

        .clickable-user:hover {
            color: #5B7BB8;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="header">
        <div class="logo">
            <div class="logo-icon"></div>
            爬虫任务管理
        </div>
        <nav class="nav-menu">
            <a href="#" class="nav-item active" data-section="dashboard">仪表板</a>
            <a href="#" class="nav-item" data-section="tasks">爬虫任务管理</a>
            <a href="#" class="nav-item" data-section="file-stats">文件传输统计</a>
            <a href="#" class="nav-item" data-section="analytics">系统监控</a>
            <a href="#" class="nav-item" data-section="settings">系统设置</a>
        </nav>
        <div class="user-info">
            <span>管理员</span>
            <div class="user-avatar">A</div>
        </div>
    </header>

    <!-- 侧边栏 -->
    <aside class="sidebar">
        <nav class="sidebar-menu">
            <a href="#" class="menu-item active" data-section="dashboard">
                <div class="menu-icon icon icon-dashboard"></div>
                仪表盘
            </a>
            <a href="#" class="menu-item" data-section="tasks">
                <div class="menu-icon icon icon-users"></div>
                爬虫任务管理
            </a>
            <a href="#" class="menu-item" data-section="file-stats">
                <div class="menu-icon icon icon-chart"></div>
                文件传输统计
            </a>
            <a href="#" class="menu-item" data-section="analytics">
                <div class="menu-icon icon icon-chart"></div>
                系统监控
            </a>
            <a href="#" class="menu-item" data-section="settings">
                <div class="menu-icon icon icon-settings"></div>
                系统设置
            </a>
        </nav>
    </aside>

    <!-- 主内容区 -->
    <main class="main-content">
        <!-- 仪表板概览 -->
        <section id="dashboard" class="content-section active">
            <!-- 顶部统计卡片 -->
            <div class="dashboard-cards">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">总数据量</h3>
                    </div>
                    <div class="card-value">1,268,630</div>
                    <div class="card-subtitle">累计采集数据条数</div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">实时采集总量</h3>
                    </div>
                    <div class="card-value">4,885</div>
                    <div class="card-subtitle">当前小时采集量</div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">监控网站总量</h3>
                    </div>
                    <div class="card-value">167</div>
                    <div class="card-subtitle">活跃监控站点</div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">运行服务器数量</h3>
                    </div>
                    <div class="card-value">1</div>
                    <div class="card-subtitle">在线服务器节点</div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">正在运行任务总数</h3>
                    </div>
                    <div class="card-value">167</div>
                    <div class="card-subtitle">活跃爬虫任务</div>
                </div>
            </div>

            <!-- 服务器监控和任务状态 -->
            <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 24px; margin-bottom: 24px;">
                <!-- 服务器每日采集量 -->
                <div class="chart-container">
                    <div class="chart-header">
                        <h3 class="chart-title">服务器每日采集量</h3>
                        <div>
                            <button class="btn btn-primary">近7天</button>
                            <button class="btn" style="background: transparent; color: rgba(255,255,255,0.6);">近一个月</button>
                            <button class="btn" style="background: transparent; color: rgba(255,255,255,0.6);">近三个月</button>
                        </div>
                    </div>
                    <div class="chart-wrapper" style="height: 400px;">
                        <canvas id="serverChart"></canvas>
                    </div>
                    <div style="text-align: center; margin-top: 16px; color: rgba(255,255,255,0.7);">
                        <span>172.27.238.215</span>
                        <div style="margin-top: 8px;">
                            <span style="background: #456A9E; padding: 4px 8px; border-radius: 4px; margin-right: 8px;">500</span>
                            <span>2563</span>
                        </div>
                    </div>
                </div>

                <!-- 任务状态预览 -->
                <div class="chart-container">
                    <div class="chart-header">
                        <h3 class="chart-title">任务状态预览</h3>
                    </div>
                    <div class="chart-wrapper" style="height: 300px;">
                        <canvas id="taskStatusChart"></canvas>
                    </div>
                </div>
            </div>

            <!-- 网站采集实时排行 -->
            <div class="table-container">
                <div class="table-header">
                    <h3 class="table-title">网站采集实时排行</h3>
                </div>
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>网站名称</th>
                            <th>IP地址</th>
                            <th>所属地区</th>
                            <th>实时采集量</th>
                            <th>采集总量</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>ProKerala</td>
                            <td>172.27.238.215</td>
                            <td>首尔特别, 印度</td>
                            <td>182</td>
                            <td>6,490</td>
                        </tr>
                        <tr>
                            <td>ProKerala</td>
                            <td>172.27.238.215</td>
                            <td>首尔特别, 印度</td>
                            <td>182</td>
                            <td>6,490</td>
                        </tr>
                        <tr>
                            <td>ProKerala</td>
                            <td>172.27.238.215</td>
                            <td>首尔特别, 印度</td>
                            <td>182</td>
                            <td>6,490</td>
                        </tr>
                        <tr>
                            <td>ProKerala</td>
                            <td>172.27.238.215</td>
                            <td>首尔特别, 印度</td>
                            <td>182</td>
                            <td>6,490</td>
                        </tr>
                        <tr>
                            <td>ProKerala</td>
                            <td>172.27.238.215</td>
                            <td>首尔特别, 印度</td>
                            <td>182</td>
                            <td>6,490</td>
                        </tr>
                        <tr>
                            <td>ProKerala</td>
                            <td>172.27.238.215</td>
                            <td>首尔特别, 印度</td>
                            <td>182</td>
                            <td>6,490</td>
                        </tr>
                        <tr>
                            <td>ProKerala</td>
                            <td>172.27.238.215</td>
                            <td>首尔特别, 印度</td>
                            <td>182</td>
                            <td>6,490</td>
                        </tr>
                        <tr>
                            <td>ProKerala</td>
                            <td>172.27.238.215</td>
                            <td>首尔特别, 印度</td>
                            <td>182</td>
                            <td>6,490</td>
                        </tr>
                        <tr>
                            <td>ProKerala</td>
                            <td>172.27.238.215</td>
                            <td>首尔特别, 印度</td>
                            <td>182</td>
                            <td>6,490</td>
                        </tr>
                        <tr>
                            <td>ProKerala</td>
                            <td>172.27.238.215</td>
                            <td>首尔特别, 印度</td>
                            <td>182</td>
                            <td>6,490</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

        <!-- 爬虫任务管理 -->
        <section id="tasks" class="content-section">
            <div class="table-container">
                <div class="table-header">
                    <h3 class="table-title">爬虫任务管理</h3>
                    <div>
                        <input type="text" placeholder="请输入检索内容" style="
                            background: rgba(255,255,255,0.1);
                            border: 1px solid #374151;
                            border-radius: 6px;
                            padding: 8px 12px;
                            color: white;
                            font-size: 14px;
                            width: 200px;
                            margin-right: 12px;
                        ">
                        <button class="btn btn-primary">搜索</button>
                        <select style="
                            background: rgba(255,255,255,0.1);
                            border: 1px solid #374151;
                            border-radius: 6px;
                            padding: 8px 12px;
                            color: white;
                            font-size: 14px;
                            margin: 0 12px;
                        ">
                            <option>点击筛选任务状态</option>
                            <option>运行中</option>
                            <option>已暂停</option>
                            <option>已完成</option>
                        </select>
                        <button class="btn btn-primary">新增任务</button>
                        <button class="btn" style="background: #22c55e; color: white;">批量启动</button>
                        <button class="btn" style="background: #ef4444; color: white;">上传数据网站</button>
                    </div>
                </div>
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>网站名称</th>
                            <th>网站链接</th>
                            <th>执行间隔 (秒)</th>
                            <th>最近执行时间</th>
                            <th>任务状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>ProKerala</td>
                            <td>www.theguardian.com</td>
                            <td>523</td>
                            <td>2023年4月23日 12:23:20</td>
                            <td><span class="status-badge status-active">运行</span></td>
                            <td>
                                <button class="btn" style="background: transparent; color: #456A9E;">详情</button>
                                <button class="btn" style="background: transparent; color: #22c55e;">启动</button>
                            </td>
                        </tr>
                        <tr>
                            <td>ProKerala</td>
                            <td>www.theguardian.com</td>
                            <td>523</td>
                            <td>2023年4月23日 12:23:20</td>
                            <td><span class="status-badge status-active">运行</span></td>
                            <td>
                                <button class="btn" style="background: transparent; color: #456A9E;">详情</button>
                                <button class="btn" style="background: transparent; color: #22c55e;">启动</button>
                            </td>
                        </tr>
                        <tr>
                            <td>ProKerala</td>
                            <td>www.theguardian.com</td>
                            <td>523</td>
                            <td>2023年4月23日 12:23:20</td>
                            <td><span class="status-badge status-active">运行</span></td>
                            <td>
                                <button class="btn" style="background: transparent; color: #456A9E;">详情</button>
                                <button class="btn" style="background: transparent; color: #22c55e;">启动</button>
                            </td>
                        </tr>
                        <tr>
                            <td>ProKerala</td>
                            <td>www.theguardian.com</td>
                            <td>523</td>
                            <td>2023年4月23日 12:23:20</td>
                            <td><span class="status-badge status-active">运行</span></td>
                            <td>
                                <button class="btn" style="background: transparent; color: #456A9E;">详情</button>
                                <button class="btn" style="background: transparent; color: #22c55e;">启动</button>
                            </td>
                        </tr>
                        <tr>
                            <td>ProKerala</td>
                            <td>www.theguardian.com</td>
                            <td>523</td>
                            <td>2023年4月23日 12:23:20</td>
                            <td><span class="status-badge status-active">运行</span></td>
                            <td>
                                <button class="btn" style="background: transparent; color: #456A9E;">详情</button>
                                <button class="btn" style="background: transparent; color: #22c55e;">启动</button>
                            </td>
                        </tr>
                        <tr>
                            <td>ProKerala</td>
                            <td>www.theguardian.com</td>
                            <td>523</td>
                            <td>2023年4月23日 12:23:20</td>
                            <td><span class="status-badge status-active">运行</span></td>
                            <td>
                                <button class="btn" style="background: transparent; color: #456A9E;">详情</button>
                                <button class="btn" style="background: transparent; color: #22c55e;">启动</button>
                            </td>
                        </tr>
                        <tr>
                            <td>ProKerala</td>
                            <td>www.theguardian.com</td>
                            <td>523</td>
                            <td>2023年4月23日 12:23:20</td>
                            <td><span class="status-badge status-active">运行</span></td>
                            <td>
                                <button class="btn" style="background: transparent; color: #456A9E;">详情</button>
                                <button class="btn" style="background: transparent; color: #22c55e;">启动</button>
                            </td>
                        </tr>
                        <tr>
                            <td>ProKerala</td>
                            <td>www.theguardian.com</td>
                            <td>523</td>
                            <td>2023年4月23日 12:23:20</td>
                            <td><span class="status-badge status-active">运行</span></td>
                            <td>
                                <button class="btn" style="background: transparent; color: #456A9E;">详情</button>
                                <button class="btn" style="background: transparent; color: #22c55e;">启动</button>
                            </td>
                        </tr>
                        <tr>
                            <td>ProKerala</td>
                            <td>www.theguardian.com</td>
                            <td>523</td>
                            <td>2023年4月23日 12:23:20</td>
                            <td><span class="status-badge status-active">运行</span></td>
                            <td>
                                <button class="btn" style="background: transparent; color: #456A9E;">详情</button>
                                <button class="btn" style="background: transparent; color: #22c55e;">启动</button>
                            </td>
                        </tr>
                        <tr>
                            <td>ProKerala</td>
                            <td>www.theguardian.com</td>
                            <td>523</td>
                            <td>2023年4月23日 12:23:20</td>
                            <td><span class="status-badge status-active">运行</span></td>
                            <td>
                                <button class="btn" style="background: transparent; color: #456A9E;">详情</button>
                                <button class="btn" style="background: transparent; color: #22c55e;">启动</button>
                            </td>
                        </tr>
                        <tr>
                            <td>ProKerala</td>
                            <td>www.theguardian.com</td>
                            <td>523</td>
                            <td>2023年4月23日 12:23:20</td>
                            <td><span class="status-badge status-active">运行</span></td>
                            <td>
                                <button class="btn" style="background: transparent; color: #456A9E;">详情</button>
                                <button class="btn" style="background: transparent; color: #22c55e;">启动</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                
                <!-- 分页组件 -->
                <div class="pagination">
                    <span style="color: rgba(255,255,255,0.6); margin-right: 16px;">共50条</span>
                    <select style="
                        background: rgba(255,255,255,0.1);
                        border: 1px solid #374151;
                        border-radius: 6px;
                        padding: 4px 8px;
                        color: white;
                        font-size: 14px;
                        margin-right: 16px;
                    ">
                        <option>50条/页</option>
                        <option>100条/页</option>
                        <option>200条/页</option>
                    </select>
                    <a href="#" class="pagination-item disabled">‹</a>
                    <a href="#" class="pagination-item active">1</a>
                    <a href="#" class="pagination-item">2</a>
                    <a href="#" class="pagination-item">3</a>
                    <a href="#" class="pagination-item">›</a>
                    <span style="color: rgba(255,255,255,0.6); margin-left: 16px;">前往</span>
                    <input type="number" value="1" style="
                        background: rgba(255,255,255,0.1);
                        border: 1px solid #374151;
                        border-radius: 4px;
                        padding: 4px 8px;
                        color: white;
                        font-size: 14px;
                        width: 50px;
                        margin: 0 8px;
                    ">
                    <span style="color: rgba(255,255,255,0.6);">页</span>
                </div>
            </div>
        </section>

        <!-- 系统监控页面 -->
        <section id="analytics" class="content-section">
            <div class="dashboard-cards">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">今日采集量</h3>
                    </div>
                    <div class="card-value">125K</div>
                    <div class="card-subtitle">+18.7% 较昨日</div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">系统可用率</h3>
                    </div>
                    <div class="card-value">99.8%</div>
                    <div class="card-subtitle">+0.2% vs 上周</div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">平均响应时间</h3>
                    </div>
                    <div class="card-value">1.2s</div>
                    <div class="card-subtitle">-0.3s vs 上周</div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">错误率</h3>
                    </div>
                    <div class="card-value">0.05%</div>
                    <div class="card-subtitle">-0.02% vs 上周</div>
                </div>
            </div>

            <!-- 系统性能趋势分析 -->
            <div class="chart-container">
                <div class="chart-header">
                    <h3 class="chart-title">系统性能趋势分析</h3>
                    <div>
                        <button class="btn btn-primary">7天</button>
                        <button class="btn" style="background: transparent; color: rgba(255,255,255,0.6);">30天</button>
                        <button class="btn" style="background: transparent; color: rgba(255,255,255,0.6);">90天</button>
                    </div>
                </div>
                <div class="chart-wrapper">
                    <canvas id="analyticsChart"></canvas>
                </div>
            </div>

            <!-- 数据来源分布和服务器状态监控 -->
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px;">
                <div class="chart-container">
                    <div class="chart-header">
                        <h3 class="chart-title">数据来源分布</h3>
                    </div>
                    <div class="chart-wrapper" style="height: 300px;">
                        <canvas id="platformChart"></canvas>
                    </div>
                </div>
                
                <div class="table-container">
                    <div class="table-header">
                        <h3 class="table-title">服务器状态监控</h3>
                        <div style="position: relative;">
                            <input type="text" placeholder="搜索服务器..." style="
                                background: rgba(255,255,255,0.1);
                                border: 1px solid #374151;
                                border-radius: 6px;
                                padding: 8px 32px 8px 12px;
                                color: white;
                                font-size: 14px;
                                width: 200px;
                            ">
                            <span style="
                                position: absolute;
                                right: 12px;
                                top: 50%;
                                transform: translateY(-50%);
                                color: rgba(255,255,255,0.6);
                                font-size: 14px;
                            ">🔍</span>
                        </div>
                    </div>
                    <div style="max-height: 300px; overflow-y: auto;">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>服务器</th>
                                    <th>CPU使用率</th>
                                    <th>内存使用率</th>
                                    <th>磁盘使用率</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>172.27.238.215</td>
                                    <td>35.2%</td>
                                    <td>68.4%</td>
                                    <td>45.8%</td>
                                    <td><span class="status-badge status-active">正常</span></td>
                                    <td>
                                        <button class="btn" style="background: transparent; color: #456A9E; font-size: 12px;">监控</button>
                                        <button class="btn" style="background: transparent; color: #22c55e; font-size: 12px;">重启</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>172.27.238.216</td>
                                    <td>28.7%</td>
                                    <td>52.3%</td>
                                    <td>38.9%</td>
                                    <td><span class="status-badge status-active">正常</span></td>
                                    <td>
                                        <button class="btn" style="background: transparent; color: #456A9E; font-size: 12px;">监控</button>
                                        <button class="btn" style="background: transparent; color: #22c55e; font-size: 12px;">重启</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>172.27.238.217</td>
                                    <td>89.2%</td>
                                    <td>94.1%</td>
                                    <td>78.5%</td>
                                    <td><span class="status-badge status-pending">高负载</span></td>
                                    <td>
                                        <button class="btn" style="background: transparent; color: #456A9E; font-size: 12px;">监控</button>
                                        <button class="btn" style="background: transparent; color: #ef4444; font-size: 12px;">告警</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>172.27.238.218</td>
                                    <td>15.4%</td>
                                    <td>32.8%</td>
                                    <td>25.6%</td>
                                    <td><span class="status-badge status-active">正常</span></td>
                                    <td>
                                        <button class="btn" style="background: transparent; color: #456A9E; font-size: 12px;">监控</button>
                                        <button class="btn" style="background: transparent; color: #22c55e; font-size: 12px;">重启</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>172.27.238.219</td>
                                    <td>0%</td>
                                    <td>0%</td>
                                    <td>0%</td>
                                    <td><span class="status-badge status-paused">离线</span></td>
                                    <td>
                                        <button class="btn" style="background: transparent; color: #456A9E; font-size: 12px;">监控</button>
                                        <button class="btn" style="background: transparent; color: #22c55e; font-size: 12px;">启动</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>172.27.238.220</td>
                                    <td>42.3%</td>
                                    <td>61.7%</td>
                                    <td>55.2%</td>
                                    <td><span class="status-badge status-active">正常</span></td>
                                    <td>
                                        <button class="btn" style="background: transparent; color: #456A9E; font-size: 12px;">监控</button>
                                        <button class="btn" style="background: transparent; color: #22c55e; font-size: 12px;">重启</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- 实时日志监控 -->
            <div class="table-container" style="margin-top: 24px;">
                <div class="table-header">
                    <h3 class="table-title">实时日志监控</h3>
                    <div>
                        <select style="
                            background: rgba(255,255,255,0.1);
                            border: 1px solid #374151;
                            border-radius: 6px;
                            padding: 8px 12px;
                            color: white;
                            font-size: 14px;
                            margin-right: 12px;
                        ">
                            <option>全部日志</option>
                            <option>错误日志</option>
                            <option>警告日志</option>
                            <option>信息日志</option>
                        </select>
                        <button class="btn btn-primary">刷新</button>
                        <button class="btn" style="background: transparent; color: rgba(255,255,255,0.6);">导出</button>
                    </div>
                </div>
                <div style="max-height: 400px; overflow-y: auto;">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>时间</th>
                                <th>级别</th>
                                <th>服务器</th>
                                <th>任务</th>
                                <th>消息</th>
                                <th>状态</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>2023-06-25 14:32:15</td>
                                <td><span class="status-badge status-active">INFO</span></td>
                                <td>172.27.238.215</td>
                                <td>ProKerala爬取</td>
                                <td>成功采集数据 182 条</td>
                                <td><span class="status-badge status-active">成功</span></td>
                            </tr>
                            <tr>
                                <td>2023-06-25 14:31:48</td>
                                <td><span class="status-badge status-pending">WARN</span></td>
                                <td>172.27.238.217</td>
                                <td>Guardian爬取</td>
                                <td>连接超时，正在重试...</td>
                                <td><span class="status-badge status-pending">重试</span></td>
                            </tr>
                            <tr>
                                <td>2023-06-25 14:31:22</td>
                                <td><span class="status-badge status-active">INFO</span></td>
                                <td>172.27.238.216</td>
                                <td>BBC新闻爬取</td>
                                <td>成功采集数据 95 条</td>
                                <td><span class="status-badge status-active">成功</span></td>
                            </tr>
                            <tr>
                                <td>2023-06-25 14:30:55</td>
                                <td><span class="status-badge" style="background: rgba(239, 68, 68, 0.2); color: #ef4444;">ERROR</span></td>
                                <td>172.27.238.219</td>
                                <td>CNN爬取</td>
                                <td>网络连接失败: Connection refused</td>
                                <td><span class="status-badge" style="background: rgba(239, 68, 68, 0.2); color: #ef4444;">失败</span></td>
                            </tr>
                            <tr>
                                <td>2023-06-25 14:30:33</td>
                                <td><span class="status-badge status-active">INFO</span></td>
                                <td>172.27.238.215</td>
                                <td>Reddit爬取</td>
                                <td>成功采集数据 267 条</td>
                                <td><span class="status-badge status-active">成功</span></td>
                            </tr>
                            <tr>
                                <td>2023-06-25 14:29:18</td>
                                <td><span class="status-badge status-pending">WARN</span></td>
                                <td>172.27.238.220</td>
                                <td>Twitter爬取</td>
                                <td>API限制达到，等待重置...</td>
                                <td><span class="status-badge status-pending">等待</span></td>
                            </tr>
                            <tr>
                                <td>2023-06-25 14:28:45</td>
                                <td><span class="status-badge status-active">INFO</span></td>
                                <td>172.27.238.218</td>
                                <td>Facebook爬取</td>
                                <td>成功采集数据 143 条</td>
                                <td><span class="status-badge status-active">成功</span></td>
                            </tr>
                            <tr>
                                <td>2023-06-25 14:28:12</td>
                                <td><span class="status-badge status-active">INFO</span></td>
                                <td>172.27.238.216</td>
                                <td>系统监控</td>
                                <td>服务器健康检查完成</td>
                                <td><span class="status-badge status-active">正常</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>

        <!-- 系统设置页面 -->
        <section id="settings" class="content-section">
            <div style="
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                height: 60vh;
                text-align: center;
            ">
                <div style="
                    width: 120px;
                    height: 120px;
                    border-radius: 50%;
                    background: linear-gradient(45deg, #456A9E, #5B7BB8);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 32px;
                    position: relative;
                    overflow: hidden;
                ">
                    <div style="
                        width: 60px;
                        height: 60px;
                        border: 3px solid white;
                        border-radius: 50%;
                        border-top-color: transparent;
                        animation: spin 2s linear infinite;
                    "></div>
                </div>
                
                <h2 style="
                    font-size: 32px;
                    font-weight: 600;
                    color: white;
                    margin-bottom: 16px;
                ">系统设置</h2>
                
                <p style="
                    font-size: 18px;
                    color: rgba(255,255,255,0.7);
                    margin-bottom: 24px;
                    max-width: 400px;
                    line-height: 1.6;
                ">此功能正在开发中，敬请期待...</p>
                
                <div style="
                    display: flex;
                    gap: 16px;
                    margin-top: 32px;
                ">
                    <button class="btn btn-primary" onclick="showDashboard()" style="
                        padding: 12px 24px;
                        font-size: 16px;
                    ">返回仪表盘</button>
                    
                    <button class="btn" style="
                        background: transparent;
                        border: 1px solid rgba(255,255,255,0.3);
                        color: rgba(255,255,255,0.8);
                        padding: 12px 24px;
                        font-size: 16px;
                    ">联系开发者</button>
                </div>
            </div>
            
            <!-- 添加旋转动画 -->
            <style>
                @keyframes spin {
                    0% { transform: rotate(0deg); }
                    100% { transform: rotate(360deg); }
                }
            </style>
        </section>

        <!-- 文件传输统计页面 -->
        <section id="file-stats" class="content-section">
            <!-- 顶部统计卡片 -->
            <div class="dashboard-cards">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">文件传输总量</h3>
                    </div>
                    <div class="card-value">417.14</div>
                    <div class="card-subtitle">今日总量(MB)</div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">最大文件</h3>
                    </div>
                    <div class="card-value">3.2 MB</div>
                    <div class="card-subtitle">最大单文件大小</div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">平均文件大小</h3>
                    </div>
                    <div class="card-value">105.8 KB</div>
                    <div class="card-subtitle">所有文件平均值</div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">文件数量</h3>
                    </div>
                    <div class="card-value">7484</div>
                    <div class="card-subtitle">今日传输文件数</div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">存储占用</h3>
                    </div>
                    <div class="card-value">30M</div>
                    <div class="card-subtitle">已使用存储空间</div>
                </div>
            </div>

            <!-- 文件传输量趋势和文件类型分布 -->
            <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 24px; margin-bottom: 24px; margin-top: 24px;">
                <!-- 文件传输量趋势图 -->
                <div class="chart-container">
                    <div class="chart-header">
                        <h3 class="chart-title">文件传输量趋势</h3>
                        <div>
                            <button class="btn btn-primary">今日</button>
                            <button class="btn" style="background: transparent; color: rgba(255,255,255,0.6);">本周</button>
                            <button class="btn" style="background: transparent; color: rgba(255,255,255,0.6);">本月</button>
                        </div>
                    </div>
                    <div class="chart-wrapper" style="height: 400px;">
                        <canvas id="fileTransferTrendChart"></canvas>
                    </div>
                </div>

                <!-- 文件类型分布 -->
                <div class="chart-container">
                    <div class="chart-header">
                        <h3 class="chart-title">文件类型分布</h3>
                    </div>
                    <div class="chart-wrapper" style="height: 300px;">
                        <canvas id="fileTypeChart"></canvas>
                    </div>
                </div>
            </div>

            <!-- 文件传输速度监控图表 -->
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px;">
                <!-- 左侧文件传输速度图表 -->
                <div class="chart-container">
                    <div class="chart-header">
                        <h3 class="chart-title">文件传输速度 (服务器1)</h3>
                        <div>
                            <span style="color: rgba(255,255,255,0.7); margin-right: 16px;">最大速度: 1037.84 KB/S</span>
                            <span style="color: rgba(255,255,255,0.7);">平均速度: 57.5 KB/S</span>
                        </div>
                    </div>
                    <div class="chart-wrapper" style="height: 300px;">
                        <canvas id="fileTransferSpeed1Chart"></canvas>
                    </div>
                    <div style="display: flex; justify-content: space-between; margin-top: 16px; color: rgba(255,255,255,0.7);">
                        <div>
                            <div>最大文件: 3.2 MB</div>
                            <div>最小文件: 2.1 KB</div>
                            <div>平均文件大小: 120.6 KB</div>
                        </div>
                        <div>
                            <div>文件数: 7484</div>
                            <div>存储路径: /pi/center_data_store_dir</div>
                            <div>存储占用: 902M</div>
                        </div>
                    </div>
                </div>
                
                <!-- 右侧文件传输速度图表 -->
                <div class="chart-container">
                    <div class="chart-header">
                        <h3 class="chart-title">文件传输速度 (服务器2)</h3>
                        <div>
                            <span style="color: rgba(255,255,255,0.7); margin-right: 16px;">最大速度: 6266.96 KB/S</span>
                            <span style="color: rgba(255,255,255,0.7);">平均速度: 417.14 KB/S</span>
                        </div>
                    </div>
                    <div class="chart-wrapper" style="height: 300px;">
                        <canvas id="fileTransferSpeed2Chart"></canvas>
                    </div>
                    <div style="display: flex; justify-content: space-between; margin-top: 16px; color: rgba(255,255,255,0.7);">
                        <div>
                            <div>最大文件: 3.2 MB</div>
                            <div>最小文件: 2.2 KB</div>
                            <div>平均文件大小: 105.8 KB</div>
                        </div>
                        <div>
                            <div>文件数: 11</div>
                            <div>存储路径: /home/ftproot/ftp/pi</div>
                            <div>存储占用: 30M</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 文件传输详情表格 -->
            <div class="table-container">
                <div class="table-header">
                    <h3 class="table-title">文件传输详情</h3>
                    <div>
                        <input type="text" placeholder="搜索文件..." style="
                            background: rgba(255,255,255,0.1);
                            border: 1px solid #374151;
                            border-radius: 6px;
                            padding: 8px 12px;
                            color: white;
                            font-size: 14px;
                            width: 200px;
                            margin-right: 12px;
                        ">
                        <button class="btn btn-primary">搜索</button>
                        <select style="
                            background: rgba(255,255,255,0.1);
                            border: 1px solid #374151;
                            border-radius: 6px;
                            padding: 8px 12px;
                            color: white;
                            font-size: 14px;
                            margin: 0 12px;
                        ">
                            <option>全部文件</option>
                            <option>图片文件</option>
                            <option>文本文件</option>
                            <option>视频文件</option>
                            <option>其他文件</option>
                        </select>
                        <button class="btn" style="background: #22c55e; color: white;">导出数据</button>
                    </div>
                </div>
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>日期时间</th>
                            <th>文件大小</th>
                            <th>传输速率</th>
                            <th>传输时间</th>
                            <th>文件路径</th>
                            <th>状态</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>2023-05-08 10:09:48</td>
                            <td>51.4 KB</td>
                            <td>0.29</td>
                            <td>177.12</td>
                            <td>/home/ftpuser/file1.jpg</td>
                            <td><span class="status-badge status-active">完成</span></td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>2023-05-08 10:03:48</td>
                            <td>0.9 KB</td>
                            <td>0.17</td>
                            <td>5.29</td>
                            <td>/home/ftpuser/data.txt</td>
                            <td><span class="status-badge status-active">完成</span></td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>2023-05-08 10:03:47</td>
                            <td>322.1 KB</td>
                            <td>0.34</td>
                            <td>947.35</td>
                            <td>/home/ftpuser/video1.mp4</td>
                            <td><span class="status-badge status-active">完成</span></td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>2023-05-08 10:03:47</td>
                            <td>93.8 KB</td>
                            <td>0.29</td>
                            <td>323.51</td>
                            <td>/home/ftpuser/doc1.pdf</td>
                            <td><span class="status-badge status-active">完成</span></td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td>2023-05-08 10:03:46</td>
                            <td>21.1 KB</td>
                            <td>0.24</td>
                            <td>87.92</td>
                            <td>/home/ftpuser/image2.jpg</td>
                            <td><span class="status-badge status-active">完成</span></td>
                        </tr>
                        <tr>
                            <td>6</td>
                            <td>2023-05-08 10:02:46</td>
                            <td>3.9 KB</td>
                            <td>0.17</td>
                            <td>20.57</td>
                            <td>/home/ftpuser/config.json</td>
                            <td><span class="status-badge status-active">完成</span></td>
                        </tr>
                        <tr>
                            <td>7</td>
                            <td>2023-05-08 10:03:45</td>
                            <td>23.7 KB</td>
                            <td>0.05</td>
                            <td>474.00</td>
                            <td>/home/ftpuser/log.txt</td>
                            <td><span class="status-badge status-active">完成</span></td>
                        </tr>
                        <tr>
                            <td>8</td>
                            <td>2023-05-08 10:03:45</td>
                            <td>76.2 KB</td>
                            <td>0.24</td>
                            <td>325.82</td>
                            <td>/home/ftpuser/report.xlsx</td>
                            <td><span class="status-badge status-active">完成</span></td>
                        </tr>
                        <tr>
                            <td>9</td>
                            <td>2023-05-08 10:03:45</td>
                            <td>17.7 KB</td>
                            <td>0.18</td>
                            <td>98.33</td>
                            <td>/home/ftpuser/icon.png</td>
                            <td><span class="status-badge status-active">完成</span></td>
                        </tr>
                        <tr>
                            <td>10</td>
                            <td>2023-05-08 10:02:42</td>
                            <td>124.1 KB</td>
                            <td>0.28</td>
                            <td>443.13</td>
                            <td>/home/ftpuser/backup.zip</td>
                            <td><span class="status-badge status-active">完成</span></td>
                        </tr>
                    </tbody>
                </table>
                
                <!-- 分页组件 -->
                <div class="pagination">
                    <span style="color: rgba(255,255,255,0.6); margin-right: 16px;">共30条</span>
                    <select style="
                        background: rgba(255,255,255,0.1);
                        border: 1px solid #374151;
                        border-radius: 6px;
                        padding: 4px 8px;
                        color: white;
                        font-size: 14px;
                        margin-right: 16px;
                    ">
                        <option>10条/页</option>
                        <option>20条/页</option>
                        <option>50条/页</option>
                    </select>
                    <a href="#" class="pagination-item disabled">‹</a>
                    <a href="#" class="pagination-item active">1</a>
                    <a href="#" class="pagination-item">2</a>
                    <a href="#" class="pagination-item">3</a>
                    <a href="#" class="pagination-item">›</a>
                    <span style="color: rgba(255,255,255,0.6); margin-left: 16px;">前往</span>
                    <input type="number" value="1" style="
                        background: rgba(255,255,255,0.1);
                        border: 1px solid #374151;
                        border-radius: 4px;
                        padding: 4px 8px;
                        color: white;
                        font-size: 14px;
                        width: 50px;
                        margin: 0 8px;
                    ">
                    <span style="color: rgba(255,255,255,0.6);">页</span>
                </div>
            </div>
        </section>
    </main>

    <script>
        // 页面切换功能
        document.addEventListener('DOMContentLoaded', function() {
            const navItems = document.querySelectorAll('.nav-item, .menu-item');
            const sections = document.querySelectorAll('.content-section');

            navItems.forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 移除所有活动状态
                    navItems.forEach(nav => nav.classList.remove('active'));
                    sections.forEach(section => section.classList.remove('active'));
                    
                    // 添加当前活动状态
                    this.classList.add('active');
                    
                    // 显示对应内容
                    const targetSection = this.getAttribute('data-section');
                    if (targetSection) {
                        document.getElementById(targetSection).classList.add('active');
                    }
                });
            });

            // 初始化图表
            initCharts();
            
            // 初始化分页功能
            initPagination();
        });

        function initCharts() {
            // 服务器采集量趋势图
            const serverCtx = document.getElementById('serverChart').getContext('2d');
            new Chart(serverCtx, {
                type: 'line',
                data: {
                    labels: ['6/7', '6/8', '6/9', '6/10', '6/11', '6/12', '6/13'],
                    datasets: [{
                        label: '采集量',
                        data: [180, 220, 250, 320, 280, 420, 380],
                        borderColor: '#456A9E',
                        backgroundColor: 'rgba(69, 106, 158, 0.1)',
                        tension: 0.4,
                        fill: true,
                        pointBackgroundColor: '#456A9E',
                        pointBorderColor: '#fff',
                        pointBorderWidth: 2,
                        pointRadius: 6
                    }, {
                        label: '错误数',
                        data: [15, 25, 20, 35, 30, 45, 40],
                        borderColor: '#ef4444',
                        backgroundColor: 'rgba(239, 68, 68, 0.1)',
                        tension: 0.4,
                        fill: true,
                        pointBackgroundColor: '#ef4444',
                        pointBorderColor: '#fff',
                        pointBorderWidth: 2,
                        pointRadius: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            labels: {
                                color: 'rgba(255, 255, 255, 0.8)'
                            }
                        }
                    },
                    scales: {
                        x: {
                            ticks: {
                                color: 'rgba(255, 255, 255, 0.6)'
                            },
                            grid: {
                                color: 'rgba(255, 255, 255, 0.1)'
                            }
                        },
                        y: {
                            ticks: {
                                color: 'rgba(255, 255, 255, 0.6)'
                            },
                            grid: {
                                color: 'rgba(255, 255, 255, 0.1)'
                            }
                        }
                    }
                }
            });

            // 任务状态饼图
            const taskStatusCtx = document.getElementById('taskStatusChart').getContext('2d');
            new Chart(taskStatusCtx, {
                type: 'doughnut',
                data: {
                    labels: ['间隙', '故障', '点赞', '平台内容特殊', '评论', '平台内容特殊'],
                    datasets: [{
                        data: [20, 25, 5, 20, 15, 15],
                        backgroundColor: [
                            '#456A9E',
                            '#ef4444', 
                            '#f59e0b',
                            '#22c55e',
                            '#8b5cf6',
                            '#06b6d4'
                        ],
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                            labels: {
                                color: 'rgba(255, 255, 255, 0.8)',
                                padding: 20,
                                usePointStyle: true,
                                font: {
                                    size: 12
                                }
                            }
                        }
                    }
                }
            });

            // 文件传输速率图表
            const transferRateCtx = document.getElementById('transferRateChart')?.getContext('2d');
            if (transferRateCtx) {
                new Chart(transferRateCtx, {
                    type: 'line',
                    data: {
                        labels: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'],
                        datasets: [{
                            label: '传输速率 (KB/s)',
                            data: [12.5, 15.8, 10.2, 25.4, 30.2, 57.5, 45.8, 38.6, 42.1, 35.7, 28.9, 22.3],
                            borderColor: '#22c55e',
                            backgroundColor: 'rgba(34, 197, 94, 0.1)',
                            tension: 0.4,
                            fill: true,
                            pointBackgroundColor: '#22c55e',
                            pointBorderColor: '#fff',
                            pointBorderWidth: 2,
                            pointRadius: 4
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                labels: {
                                    color: 'rgba(255, 255, 255, 0.8)'
                                }
                            }
                        },
                        scales: {
                            x: {
                                ticks: {
                                    color: 'rgba(255, 255, 255, 0.6)'
                                },
                                grid: {
                                    color: 'rgba(255, 255, 255, 0.1)'
                                }
                            },
                            y: {
                                ticks: {
                                    color: 'rgba(255, 255, 255, 0.6)'
                                },
                                grid: {
                                    color: 'rgba(255, 255, 255, 0.1)'
                                }
                            }
                        }
                    }
                });
            }

            // 文件大小分布图表
            const fileSizeCtx = document.getElementById('fileSizeChart')?.getContext('2d');
            if (fileSizeCtx) {
                new Chart(fileSizeCtx, {
                    type: 'doughnut',
                    data: {
                        labels: ['<10KB', '10KB-100KB', '100KB-500KB', '500KB-1MB', '1MB-5MB', '>5MB'],
                        datasets: [{
                            data: [30, 25, 20, 15, 8, 2],
                            backgroundColor: [
                                '#456A9E',
                                '#22c55e', 
                                '#f59e0b',
                                '#8b5cf6',
                                '#06b6d4',
                                '#ef4444'
                            ],
                            borderWidth: 0
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'right',
                                labels: {
                                    color: 'rgba(255, 255, 255, 0.8)',
                                    padding: 20,
                                    usePointStyle: true,
                                    font: {
                                        size: 12
                                    }
                                }
                            }
                        }
                    }
                });
            }

            // 文件传输趋势图
            const fileTransferTrendCtx = document.getElementById('fileTransferTrendChart')?.getContext('2d');
            if (fileTransferTrendCtx) {
                new Chart(fileTransferTrendCtx, {
                    type: 'line',
                    data: {
                        labels: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
                        datasets: [{
                            label: '传输量 (MB)',
                            data: [15.2, 12.8, 8.5, 5.3, 3.2, 2.8, 4.5, 10.2, 25.4, 42.8, 57.5, 48.6, 35.2, 28.7, 32.5, 38.9, 45.2, 52.8, 48.7, 35.2, 28.4, 22.5, 18.7, 16.2],
                            borderColor: '#456A9E',
                            backgroundColor: 'rgba(69, 106, 158, 0.1)',
                            tension: 0.4,
                            fill: true,
                            pointBackgroundColor: '#456A9E',
                            pointBorderColor: '#fff',
                            pointBorderWidth: 2,
                            pointRadius: 3
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                labels: {
                                    color: 'rgba(255, 255, 255, 0.8)'
                                }
                            }
                        },
                        scales: {
                            x: {
                                ticks: {
                                    color: 'rgba(255, 255, 255, 0.6)'
                                },
                                grid: {
                                    color: 'rgba(255, 255, 255, 0.1)'
                                }
                            },
                            y: {
                                ticks: {
                                    color: 'rgba(255, 255, 255, 0.6)'
                                },
                                grid: {
                                    color: 'rgba(255, 255, 255, 0.1)'
                                }
                            }
                        }
                    }
                });
            }

            // 文件类型分布图
            const fileTypeCtx = document.getElementById('fileTypeChart')?.getContext('2d');
            if (fileTypeCtx) {
                new Chart(fileTypeCtx, {
                    type: 'doughnut',
                    data: {
                        labels: ['图片', '文档', '视频', '音频', '压缩包', '其他'],
                        datasets: [{
                            data: [35, 25, 15, 10, 10, 5],
                            backgroundColor: [
                                '#456A9E',
                                '#22c55e', 
                                '#f59e0b',
                                '#8b5cf6',
                                '#06b6d4',
                                '#ef4444'
                            ],
                            borderWidth: 0
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'right',
                                labels: {
                                    color: 'rgba(255, 255, 255, 0.8)',
                                    padding: 20,
                                    usePointStyle: true,
                                    font: {
                                        size: 12
                                    }
                                }
                            }
                        }
                    }
                });
            }

            // 文件传输速度图表 (服务器1)
            const fileTransferSpeed1Ctx = document.getElementById('fileTransferSpeed1Chart')?.getContext('2d');
            if (fileTransferSpeed1Ctx) {
                new Chart(fileTransferSpeed1Ctx, {
                    type: 'line',
                    data: {
                        labels: ['13:53:29', '13:57:40', '14:00:07', '14:02:31', '14:04:34', '14:06:33', '14:09:01', '14:11:23'],
                        datasets: [{
                            label: '传输速度 (KB/s)',
                            data: [120, 180, 220, 150, 280, 200, 320, 150],
                            borderColor: '#22c55e',
                            backgroundColor: 'rgba(34, 197, 94, 0.1)',
                            tension: 0.4,
                            fill: true,
                            pointBackgroundColor: '#22c55e',
                            pointBorderColor: '#fff',
                            pointBorderWidth: 2,
                            pointRadius: 4
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                labels: {
                                    color: 'rgba(255, 255, 255, 0.8)'
                                }
                            }
                        },
                        scales: {
                            x: {
                                ticks: {
                                    color: 'rgba(255, 255, 255, 0.6)'
                                },
                                grid: {
                                    color: 'rgba(255, 255, 255, 0.1)'
                                }
                            },
                            y: {
                                ticks: {
                                    color: 'rgba(255, 255, 255, 0.6)'
                                },
                                grid: {
                                    color: 'rgba(255, 255, 255, 0.1)'
                                },
                                max: 1100
                            }
                        }
                    }
                });
            }

            // 文件传输速度图表 (服务器2)
            const fileTransferSpeed2Ctx = document.getElementById('fileTransferSpeed2Chart')?.getContext('2d');
            if (fileTransferSpeed2Ctx) {
                new Chart(fileTransferSpeed2Ctx, {
                    type: 'line',
                    data: {
                        labels: ['14:04:56', '14:05:27', '14:05:37', '14:07:37', '14:08:18', '14:08:38', '14:09:17', '14:10:17'],
                        datasets: [{
                            label: '传输速度 (KB/s)',
                            data: [1500, 2200, 6000, 1800, 2500, 3000, 4200, 2000],
                            borderColor: '#f59e0b',
                            backgroundColor: 'rgba(245, 158, 11, 0.1)',
                            tension: 0.4,
                            fill: true,
                            pointBackgroundColor: '#f59e0b',
                            pointBorderColor: '#fff',
                            pointBorderWidth: 2,
                            pointRadius: 4
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                labels: {
                                    color: 'rgba(255, 255, 255, 0.8)'
                                }
                            }
                        },
                        scales: {
                            x: {
                                ticks: {
                                    color: 'rgba(255, 255, 255, 0.6)'
                                },
                                grid: {
                                    color: 'rgba(255, 255, 255, 0.1)'
                                }
                            },
                            y: {
                                ticks: {
                                    color: 'rgba(255, 255, 255, 0.6)'
                                },
                                grid: {
                                    color: 'rgba(255, 255, 255, 0.1)'
                                },
                                max: 7000
                            }
                        }
                    }
                });
            }

            // 分析图表
            setTimeout(() => {
                const analyticsCtx = document.getElementById('analyticsChart')?.getContext('2d');
                if (analyticsCtx) {
                    new Chart(analyticsCtx, {
                        type: 'bar',
                        data: {
                            labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                            datasets: [{
                                label: '数据采集量',
                                data: [12000, 15000, 13500, 17000, 16500, 18000, 19200],
                                backgroundColor: 'rgba(69, 106, 158, 0.8)',
                                yAxisID: 'y'
                            }, {
                                label: '成功率(%)',
                                data: [92.1, 94.8, 91.3, 95.2, 93.9, 96.5, 95.8],
                                type: 'line',
                                borderColor: '#22c55e',
                                backgroundColor: 'rgba(34, 197, 94, 0.1)',
                                yAxisID: 'y1',
                                tension: 0.4
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: {
                                    labels: {
                                        color: 'rgba(255, 255, 255, 0.8)'
                                    }
                                }
                            },
                            scales: {
                                x: {
                                    ticks: {
                                        color: 'rgba(255, 255, 255, 0.6)'
                                    },
                                    grid: {
                                        color: 'rgba(255, 255, 255, 0.1)'
                                    }
                                },
                                y: {
                                    type: 'linear',
                                    display: true,
                                    position: 'left',
                                    ticks: {
                                        color: 'rgba(255, 255, 255, 0.6)'
                                    },
                                    grid: {
                                        color: 'rgba(255, 255, 255, 0.1)'
                                    }
                                },
                                y1: {
                                    type: 'linear',
                                    display: true,
                                    position: 'right',
                                    ticks: {
                                        color: 'rgba(255, 255, 255, 0.6)'
                                    },
                                    grid: {
                                        drawOnChartArea: false
                                    }
                                }
                            }
                        }
                    });
                }

                // 数据来源分布图表
                const platformCtx = document.getElementById('platformChart')?.getContext('2d');
                if (platformCtx) {
                    new Chart(platformCtx, {
                        type: 'doughnut',
                        data: {
                            labels: ['新闻网站', '社交媒体', '电商平台', '论坛', '博客', '其他'],
                            datasets: [{
                                data: [35, 25, 15, 10, 10, 5],
                                backgroundColor: [
                                    '#456A9E',
                                    '#22c55e', 
                                    '#f59e0b',
                                    '#ef4444',
                                    '#8b5cf6',
                                    '#06b6d4'
                                ],
                                borderWidth: 0
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: {
                                    position: 'bottom',
                                    labels: {
                                        color: 'rgba(255, 255, 255, 0.8)',
                                        padding: 20,
                                        usePointStyle: true
                                    }
                                }
                            }
                        }
                    });
                }
            }, 100);
        }

        // 分页功能
        function initPagination() {
            const paginationItems = document.querySelectorAll('.pagination-item:not(.disabled):not(.pagination-info)');
            
            paginationItems.forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 如果是省略号，不处理
                    if (this.textContent.includes('...')) return;
                    
                    // 移除所有活动状态
                    document.querySelectorAll('.pagination-item').forEach(p => p.classList.remove('active'));
                    
                    // 处理上一页/下一页按钮
                    if (this.textContent.includes('上一页') || this.textContent.includes('下一页')) {
                        const currentActive = document.querySelector('.pagination-item.active');
                        const currentPage = currentActive ? parseInt(currentActive.textContent) : 1;
                        let newPage = currentPage;
                        
                        if (this.textContent.includes('上一页') && currentPage > 1) {
                            newPage = currentPage - 1;
                        } else if (this.textContent.includes('下一页') && currentPage < 10) {
                            newPage = currentPage + 1;
                        }
                        
                        // 找到对应页码并激活
                        const targetPage = document.querySelector(`.pagination-item[href="#"]:not([class*="页"])`);
                        if (targetPage && targetPage.textContent == newPage) {
                            targetPage.classList.add('active');
                        } else {
                            // 如果找不到具体页码，激活第一个数字页码
                            const firstNumPage = document.querySelector('.pagination-item[href="#"]:not([class*="页"]):not(.disabled)');
                            if (firstNumPage) firstNumPage.classList.add('active');
                        }
                        
                        // 更新分页信息
                        updatePaginationInfo(newPage);
                        
                        // 更新上一页/下一页按钮状态
                        updatePaginationButtons(newPage);
                    } else {
                        // 数字页码点击
                        this.classList.add('active');
                        const pageNum = parseInt(this.textContent);
                        updatePaginationInfo(pageNum);
                        updatePaginationButtons(pageNum);
                    }
                });
            });
        }

        function updatePaginationInfo(currentPage) {
            const paginationInfo = document.querySelector('.pagination-info');
            const startRecord = (currentPage - 1) * 10 + 1;
            const endRecord = Math.min(currentPage * 10, 98);
            paginationInfo.textContent = `显示 ${startRecord}-${endRecord} 条，共 98 条记录`;
        }

        function updatePaginationButtons(currentPage) {
            const prevBtn = document.querySelector('.pagination-item:first-child');
            const nextBtn = document.querySelector('.pagination-item:last-child');
            
            // 更新上一页按钮
            if (currentPage <= 1) {
                prevBtn.classList.add('disabled');
            } else {
                prevBtn.classList.remove('disabled');
            }
            
            // 更新下一页按钮
            if (currentPage >= 10) {
                nextBtn.classList.add('disabled');
            } else {
                nextBtn.classList.remove('disabled');
            }
        }

        // 显示仪表盘页面
        function showDashboard() {
            document.querySelectorAll('.content-section').forEach(section => {
                section.classList.remove('active');
            });
            document.getElementById('dashboard').classList.add('active');
            
            // 更新导航
            document.querySelectorAll('.nav-item, .menu-item').forEach(item => {
                item.classList.remove('active');
            });
            document.querySelector('[data-section="dashboard"]').classList.add('active');
        }
    </script>
</body>
</html>